<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>家庭记账管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.css" />
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" />
	<link rel="stylesheet" href="//cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css" />
	<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="//cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" />
    <link rel="stylesheet" href="/gradesign/assets/adminlte-2.3.7/css/AdminLTE.min.css"  />
    <link rel="stylesheet" href="/gradesign/assets/adminlte-2.3.7/css/skins/_all-skins.min.css" />
    <link rel="stylesheet" href="/gradesign/css/app.css" />
    <link href="/gradesign/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"/>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        body{
            background:#fafafa;
        }
        .fa{line-height: 2 !important}
        .chart{margin-left:20px;border:1px solid #e7e7e7;margin-top: 30px;height:340px;width:810px;border-radius:5px;}
        
        .con{margin-left:20px;margin-right:20px}
        .notes{width:260px;float:left;height:60px;margin:5px 20px;line-height:50px;}
        .info-box-text{margin-top:13px;}
        .information{margin-top:15px;}
        .line{margin-top:15px;height:360px;width:816px;background:#ffffff!important;border: 1px solid #e7e7e7;border-radius:5px;}
        #lineChart{margin-top:10px;padding:10px;height:340px;width:810px;background:#ffffff!important}
        .box-warning{height:230px;overflow:hidden}
        .bbox{overflow:hidden}
        .box-header{overflow:hidden}
        li {list-style-type:none;}
        ul{padding:0px;}
        #planDate{width:60%;}
    </style>
    
</head>
<body>
<section class="content-header">
<h3>家庭记账管理系统</h3>
</section>
<div class="con">
	<div>
	    <div class="row">
	        <!-- 一行包括用户总数等四个 -->
	        <div class="col-md-3 col-sm-6 col-xs-12">
	                <div class="info-box">
	                    <a href="/gradesign/income/index">
	                    <span class="info-box-icon bg-aqua" alt="点击"><i class="fa fa-plus-circle"></i></span></a>
	                    <div class="info-box-content">
	                        <span class="info-box-text" >当月收入</span>
	                        <span class="info-box-number">
		                        <span th:text="${incomeTotal}"></span>
		                        <small>元</small>
		                    </span>
	                    </div>
	                </div>
	        </div>
	        <div class="col-md-3 col-sm-6 col-xs-12">
	            <div class="info-box">
	            	<a href="/gradesign/pay/index">
	                <span class="info-box-icon bg-red"><i class=" fa fa-minus"></i></span></a>
	                <div class="info-box-content">
	                    <span class="info-box-text">当月支出</span>
	                    <span class="info-box-number">
	                        <span th:text="${payTotal}"></span>
	                        <small>元</small>
	                    </span>
	                </div>
	            </div>
	        </div>
	        <div class="col-md-3 col-sm-6 col-xs-12">
	            <div class="info-box">
	            	<a href="/gradesign/bill/listBill">
	                <span class="info-box-icon bg-green"><i class="fa fa-table"></i></span></a>
	                <div class="info-box-content">
	                    <span class="info-box-text">账单记录</span>
	                </div>
	            </div>
	        </div>
	        <div class="col-md-3 col-sm-6 col-xs-12">
	            <div class="info-box" th:title="若未设置预算则取近六月支出均值">
	            	<a href="/gradesign/bill/listBill">
	                <span class="info-box-icon bg-yellow"><i class="fa fa-bars"></i></span></a>
	                <div class="info-box-content" >
	                    <span class="info-box-text">当月预算</span>
	                    <span class="info-box-number">
	                        <span th:text="${debuget}"></span>
	                        <small>元</small>
	                    </span>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>
	<div class="row">
		<div class="col-md-9 col-sm-6 col-xs-12">
			<div class="line">
				<div id= "lineChart"></div>
			</div>
	    </div>
	    <div class="information col-md-3 col-sm-6 col-xs-12">
	        	<div class="box box-warning">
	        		<div class="box-header with-border">
	        			<h3 class="box-title">提示信息</h3>
	        			<div class="box-tools pull-right" >
	        				<button type="button" class="btn btn-box-tool" data-widget="remove">
	        					<i class="fa fa-times"></i>
	        				</button>
	        			</div>
	        		</div>
	        		<div class="box-body">
	        		<div class="bbox">
	        			<div id="debtTips" class="debtTips">
	        			<li class="ll">
 	        				<ul th:each="endDebtList : ${endDebtList}">
	        					<a href="/gradesign/debt/index"><li><p style="color:green"  th:text="七日内到期借款：+${endDebtList.item}"></p></li></a>
	        				</ul> 
	         				<ul th:each="todayEndDebtList : ${todayEndDebtList}">
	        					<a href="/gradesign/debt/index"><li><p style="color:yellow"  th:text="今日到期借款：+${todayEndDebtList.item}"></p></li></a>
	        				</ul>
	        				<ul th:each="endedDebtList : ${endedDebtList}">
	        					<a href="/gradesign/debt/index"><li><p style="color:red"  th:text="已到期借款：+${endedDebtList.item}"></p></li></a>
	        				</ul>
	        				<ul th:each="remindList : ${remindList}">
	        					<a href="/gradesign/debt/index"><li><p style="color:blue"  th:text="${remindList.plandate}+提醒：+${remindList.msg}"></p></li></a>
	        				</ul>
	        			</li>
	        			</div>
	        		</div>
	        		</div>
        		</div>
        		<div class="box box-primary direct-chat direct-chat-primary">
        			<div class="box-header with-border">
        				<form class="form-inline">
	        				<div class="form-group input-group-sm">
	        					<label for="planDate">日期：</label>
	        					<input type="text" class="form-control" id="planDate"/>
	        				</div>
	        			</form>
        				<div class="box-tools pull-right">
        					<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        					<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
        				</div>
        			</div>
        			<div class="box-footer">
        				<div class="input-group">
        					<input type="text" id="message" placeholder="添加备忘。。" class="form-control"/>
        					<span class="input-group-btn">
        						<button type="button" id="msg_sub" class="btn btn-danger btn-flat" onclick="addRemind()">添加</button>
        					</span>
        				</div>
        			</div>
        		</div>
	        </div>
	</div>
</div>
</body>
<script type="text/javascript" src="/gradesign/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/gradesign/assets/adminlte-2.3.7/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="/gradesign/assets/adminlte-2.3.7/js/app.min.js"></script>
<script type="text/javascript" src="/gradesign/js/echarts.min.js"></script>
<script type="text/javascript" src="/gradesign/js/customed.js"></script>
<script type="text/javascript" src="/gradesign/js/macarons.js"></script>

<script type="text/javascript" src="/gradesign/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="/gradesign/js/console/main.js"></script>
<script type="text/javascript">
</script>
</html>